<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>todo List</title>
  <style>
    /* 后代选择器 */
    .done li {
      color: gray;
      text-decoration: line-through;
    }

    .todo li {
      width: 200px;
      height: 28px;
      position: relative;
    }

    /* .todo li button {
      float: right;
    } */
    .todo li button {
      /* 绝对定位：会以第一个不是默认定位的父元素为原点进行定位,直到body为止 */
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <p>待办事项</p>
  <!-- 第一部分，记录 -->
  <input type="text" id="inp" placeholder="请输入待办事项">
  <button onclick="save()">保存</button>
  <!-- 第二部分，待办事项 -->
  <p>待办事项</p>
  <ol id="todo" class="todo">
  </ol>
  <!-- 第三部分，已完成事项 -->
  <p>已完成事项</p>
  <ol class="done">
  </ol>
  <script>
    // 存放事件的数组
    let eventList = [];
    // 保存事件，添加到数组中
    function save() {
      // 获取事件，就是输入框的值
      // inp是输入框的id，这可以代表整个元素，这是js的缩写
      let event = inp.value;
      // 向数组添加内容，用来保存数据
      eventList.push(event);
      // 声明一个字符串，用来盛放ol元素中的内容
      let content = '';
      // for循环，遍历数组，获取每一个事项并累加
      for(let index=0; index < eventList.length; index ++) {
        content += `<li>${eventList[index]}</li>`
      }
      // 添加到ol元素上
      todo.innerHTML = content;
    }
  </script>
</body>
</html>